每次點進一個網址，網頁都需要加載一段時間，今天的目標是做出一個簡單的讀取畫面，讓網頁加載完成後才能看到主頁面。

首先加入元素，讓讀取畫面填滿螢幕。

<div class="loading" 
style="position: absolute;
      z-index: 5;
 	  width: 100%;
      height: 100%;
      pointer-events: none">
  <p> LOADING... </p>
</div>

一樣用on()來觸發，讓讀取畫面在加載完後隱藏。

$(window).on('load', function(){
/* 頁面加載完要做的事 */
$(".loading").hide();
});

測試一下，雖然成功但是加載畫面消失的比較突兀，接著想辦法給它加上淡出動畫。
一般情況，給元素加上transition: 秒數，樣式轉換時就會有過渡效果，昨天我們透過給元素加上新的class來改變樣式，那這裡是不是也可以用相同的方式做到？

加上新的class讓畫面變透明，記得給body加上transition屬性

.body{
  transition: 1s;
}

.hide{
  opacity: 0;
}

改為當頁面加載完，透明度調為0

$(window).on('load', function(){
$(".loading").addClass("hide");
});

參考資料/延伸閱讀

1. cloud.tencent.com
2. seanacnet